<template>
    <div class="com-continer">
        <h3>发表评论</h3>   
        <hr>
        <textarea placeholder="请输入要BB的内容（最多120字）" maxlength="120" v-model="msg"></textarea>  
        <mt-button type="primary" size='large' @click="postcomment">发表评论</mt-button>
        <div class="con11" v-for="(item,i) in comList" :key="item.id">
            <div class="con22">第{{i+1}}楼 &nbsp&nbsp  用户：{{item.user_name}} &nbsp&nbsp   发表时间：{{item.add_time|dataFormat}}</div>
            <div class="con33">{{item.content=="undefined"?"这个人很懒":item.content}} </div>
        </div>
         
        <mt-button type="danger" size='large' plain @click="getmore">加载更多</mt-button>
    </div>
</template>

<script>
import {Toast} from 'mint-ui'
export default {
    data() {
        return {
            pageindex:1,
            comList:[],
            msg:""
        }
    },
    created() {
        this.getcomment()
    },
    methods: {
        getcomment(){
            this.$http.get('http://www.liulongbin.top:3005/api/getcomments/'+this.id+"?pageindex="+this.pageindex).then(result=>{
                if(result.body.status==0){
                    // this.comList=result.body.message
                    //  console.log(this.comList)
                    this.comList=this.comList.concat(result.body.message)
                }else{
                    Toast("获取评论失败")
                }
            })
        },
        getmore(){
            this.pageindex++;
            this.getcomment()
        },
        postcomment(){
            // 做出验证
            if(this.msg.trim().length===0){
               return Toast("评论不能为空")
            }


            this.$http.post('http://www.liulongbin.top:3005/api/postcomment/'+this.$route.params.id,{content:this.msg.trim()})
            .then(result=>{
                if(result.body.status===0){
                    var vm={user_name:"匿名用户",add_time:Date.now(),content:this.msg}
                    this.comList.unshift(vm)
                    this.msg=""
                }
            })
        }
    },
    props:['id']
}
</script>

<style lang="scss" scoped>
.com-continer{
    h3{
        font-size: 16px;
    }
    textarea{
        font-size: 14px;
        margin: 0;
    }
    .con11{
        margin: 10px 0;
        font-size: 13px;
       
        .con22{
            background-color: #cccccc;
            line-height: 35px;
             color: black;
        }
        .con33{
            text-indent: 2em;
            line-height: 35px;
             color: black;
        }
    }
}

</style>
